<script>
import Tooltip from "ant-design-vue/es/tooltip";
import { cutStrByFullLength, getStrFullLength } from "@/libs/utils";
export default {
  name: "Ellipsis",
  components: {
    Tooltip,
  },
  props: {
    prefixCls: {
      type: String,
      default: "ant-pro-ellipsis",
    },
    tooltip: {
      type: Boolean,
    },
    length: {
      type: Number,
      required: true,
    },
    lines: {
      type: Number,
      default: 1,
    },
    fullWidthRecognition: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    getStrDom(str, fullLength) {
      return (
        <span>
          {cutStrByFullLength(str, this.length) +
            (fullLength > this.length ? "..." : "")}
        </span>
      );
    },
    getTooltip(fullStr, fullLength) {
      return (
        <Tooltip>
          <template slot="title">{fullStr}</template>
          {this.getStrDom(fullStr, fullLength)}
        </Tooltip>
      );
    },
  },
  render() {
    const { tooltip, length } = this.$props;
    const str = this.$slots.default.map((vNode) => vNode.text).join("");
    const fullLength = getStrFullLength(str);
    const strDom =
      tooltip && fullLength > length
        ? this.getTooltip(str, fullLength)
        : this.getStrDom(str, fullLength);
    return strDom;
  },
};
</script>
